<style>
    .page{background-color: white;}
    .page-nav {height: 29px; line-height: 29px; font-size: 12px; color: #666;}
    .page-nav em{font-style: normal; margin: 0 5px;}
    .page-nav a{color: #666;}
    .post-header{background-color: #fafafa; border: 1px solid #eee; border-bottom: 3px solid #0f5489;}
    .post-header a{display: inline-block; padding: 20px; font-size: 18px; font-weight: 700; color: #333;}
    .editor-header{display: flex; height: 50px; margin: 10px 0;}
    .editor-header div.tag{width: 210px; }
    .editor-header div.tag input{width: 100%; height: 40px; padding: 2px; font-size: 16px; }
    .editor-header div.title{flex: 1;}
    .editor-header div.title input {width: 100%; height: 40px; padding: 2px; font-size: 18px; font-weight: 700;}
    .submit-btn {width: 100%; padding: 0 10px;}
    #editor-m{display: none;}
    .upload-imgs{display: none;}
    @media (max-width: 1000px) {
        .page-nav{display: none;}
        .upload-imgs{display: block !important;}
        .editor-header{ flex-direction: column; height: 100%; padding: 0 10px;}
        .editor-header .tag{flex: 1; width: 100%!important;}
        .editor-header .title {flex-grow:0}
        .editor-header div.tag input {width: 100%;height: 25px;  padding: 2px;  font-size: 16px;  }
        .editor-header div.title input {width: 100%;height: 25px;padding: 2px; font-size: 18px; font-weight: 700; margin-top: 5px;}
        .submit-btn{width: 100%; padding: 0; margin-top: 8px;}
        .submit-btn a{font-size: 13px!important;}
        #editor{display: none;}
        #editor-m{display: block; padding: 8px;}
        #editor-m #editor-m-content {overflow-x: auto;}
        #editor-m #editor-m-content img {width: 100px;}
    }
</style>
<div class="new-post-wrapper">
    <div class="container">
        <div class="page-nav">
            <i class="i i-home"></i>
            <em> > </em>
            <a href="javascript:void (0)">论坛名称</a>
            <em> > </em>
            <span>发表新帖</span>
        </div>
        <div class="post-header">
            <a href="javascript:void (0)">
                <i class="i i-tag"></i>发表新帖
            </a>
        </div>
        <div class="post-editor">
            <div class="editor-header">
                <!--<div class="tag">-->
                    <!--<input id="post-tag" type="text" placeholder="帖子标签，以逗号分隔">-->
                <!--</div>-->
                <div class="title">
                    <input id="post-title" type="text" placeholder="请输入帖子标题">
                </div>
                <select style="height: 48px; padding: 2px" id="label">
                    <option>请选择板块</option>
                </select>
            </div>
            <div class="editor-wrap">
                <div id="editor">

                </div>
                <div id="editor-m">
                    <div contenteditable="true" id="editor-m-content"; style="width: 100%; height: 250px; border: 1px solid #ddd;"></div>
                </div>
            </div>
            <div class="submit-btn">
                <div class="upload-imgs">
                    <div class="weui-uploader__input-box" style="width: 44px;height: 44px">
                        <input type="file" class="weui-uploader__input" id="mupload">
                    </div>
                </div>
                <a id="post-submit" href="javascript:void (0)" class="weui-btn weui-btn_mini weui-btn_primary">发帖</a>
            </div>
        </div>
    </div>
</div>

<script>
    (function (w, u) {
        var E = w.wangEditor;
        var editor = new E('#editor');
//        editor.customConfig.uploadImgShowBase64 = true;
        editor.customConfig.uploadImgServer = '/upload/forum_article';
        editor.customConfig.uploadFileName = '0';
        editor.customConfig.uploadImgParams = false;
        editor.create();
        // title 标题
        // content 内容
        // label_id
        // tag 标签
        // forum/add
        $('body').on('click', '#post-submit', function () {
            var aBtn = $(this);
            $(this).html(`正在发表`);
            $(this).addClass('weui-btn weui-btn_disabled weui-btn_default');
            var title = $('#post-title').val();
//            var tag = $('#post-tag').val();
//            if(!tag){
//                $(this).html(`发帖`);
//                $(this).removeClass('weui-btn_disabled');
//                return TOAST.wran('请填写标签',' ', 3);
//            }
            if(!title){
                $(this).html(`发帖`);
                $(this).removeClass('weui-btn_disabled');
                return TOAST.wran('请填写标题', ' ', 3);
            }
            var type = $('#label').val();
            if(type == '请选择板块'){
                $(this).html(`发帖`);
                $(this).removeClass('weui-btn_disabled');
                return TOAST.wran('请选择板块', ' ', 3);
            }
            var labelId = GET('label_id');
            var content = editor.txt.html();
            var content2 = editor.txt.text();
            var editorMContent = $('#editor-m-content').html();
            if (editorMContent) {
                content = editorMContent;
            }
            if (title.length > 25) {
                $(this).html(`发帖`);
                $(this).removeClass('weui-btn_disabled');
                return TOAST.wran('标题最多输入20个字符', ' ', 3);
            }
            $.ajax({
                type: 'POST',
                url: 'forum/add',
                data: {
                    title,
                    content,
//                    tag,
                    label_id: type
                },
                success: function (data) {
                    if(data.state) {
                        aBtn.html('发帖成功');
                        TOAST.success('发帖成功,请等待审核',' ',3);
                        w.location.href = 'home?label_id=' + labelId + '#forum_page';
                    }else{
                        aBtn.html('发帖');
                        aBtn.removeClass('weui-btn_disabled');
                        return TOAST.wran(data.errormsg,' ',2);
                    }
                },
                error: function (err) {
                    aBtn.html('发帖');
                    aBtn.removeClass('weui-btn_disabled');
                    return TOAST.wran('发帖失败，请重试', ' ', 3);
                }
            })
        })
    })(window, undefined);
    $.ajax({
        url:'/forum/forum_list',
        type:'POST',
        data:{
            template:1
        },
        success:function (data) {
            data.data.list.forEach(function (item, index) {
                $('#label').append("<option value=" + item.label_id + ">" + item.cn + "</option>");
            })
        }
    });
    function progressHandlingFunction(e) {
        if (e.lengthComputable) {
            var percent = e.loaded/e.total*100;
            $('.progress').html(percent.toFixed(2));
        }
    };

    $('body').on('change', '#mupload', function () {
        $(this).before("<div class=\"weui-uploader__file-content progress\">0%</div>");
        var formDate = new FormData();
        formDate.append('0', $('#mupload')[0].files[0]);
        $.ajax({
            url: '/upload/phoneimg',
            type: 'POST',
            cache: false,
            data: formDate,
            xhr: function () {
                myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){
                    myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
                }
                return myXhr;
            },
            processData: false,
            contentType: false,
            success: function (data) {
                if (data.state) {
                    var imgUrl = data.data.url;
                    var el = $('#editor-m-content');
                    el.append("<img src='" + imgUrl + "' />");
                    $('.progress').remove();
                    return
                }
                return TOAST.wran(data.errormsg, ' ', 1);
            },
            error: function (err) {
                return TOAST.wran('上传图片失败', ' ', 2);

            }
        })
    });
</script>